<!--
 * @Description: 人员节点表单
 * @Author: zhailei
 * @Date: 2021-01-18 15:17:26
 * @LastEditTime: 2021-09-16 09:26:07
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\components\TopVUI\bpmn\panel\formPanel.vue
-->
<template>
  <div>
    <a-alert
      message="注意：所有流程任务节点只允许使用同一种类型的表单"
      banner
      style="margin-left: 10px;margin-right: 10px;"
    />
    <div class="form-container">
      <div class="form-row">
        <div class="form-item">添加表单</div>
        <a-button type="primary" class="form-button" @click="addForm"
          >添加表单</a-button
        >
      </div>
      <div class="form-row">
        <div class="form-item">
          <a-tooltip placement="bottom">
            <template slot="title">
              配置接收规则后，执行到本节点时会将上一任务节点内的表单字段数据填入到当前节点内表单字段
            </template>
            数据接收
          </a-tooltip>
        </div>
        <a-button
          class="form-button"
          @click="transferData"
          :disabled="formFieldList.length === 0 || lastNodeList.length === 0"
          >配置数据接收</a-button
        >
      </div>
    </div>
    <div class="form-header" v-if="formName">
      <div class="form-name">
        表单名称：
        <span
          ><a-tag color="#2db7f5">{{ formName }}</a-tag></span
        >
      </div>
      <div class="form-name">
        表单类型：
        <span
          ><a-tag color="#87d068">{{
            formType == 1 ? "系统表单" : "自定义表单"
          }}</a-tag></span
        >
      </div>
      <div class="form-name" v-if="formType == 2">
        表单布局：
        <span
          ><a-tag color="#f50">{{
            formLayout ? formLayout : "未选择"
          }}</a-tag></span
        >
      </div>
    </div>
    <a-card class="l-card" title="批量全选" v-if="formType == 2">
      <div slot="extra" href="#">
        <a slot="actions">
          <a-checkbox
            v-model="allLook"
            @change="
              (e) => {
                onChangeEditAll(e.target.checked, 0);
              }
            "
          >
            可查看
          </a-checkbox>
        </a>
        <span style="margin: 0 8px;"></span>
        <a slot="actions">
          <a-checkbox
            v-model="allEdit"
            :disabled="!allDisabled"
            @change="
              (e) => {
                onChangeEditAll(e.target.checked, 1);
              }
            "
          >
            可编辑
          </a-checkbox>
        </a>
      </div>
      <a-list class="demo-loadmore-list" :data-source="formFieldList">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a slot="actions">
            <a-checkbox v-model="item.isLook" @change="onChangeEdit(item, 0)">
              可查看
            </a-checkbox>
          </a>
          <a slot="actions">
            <a-checkbox
              v-model="item.isEdit"
              :disabled="!item.isLook"
              @change="onChangeEdit(item, 1)"
            >
              可编辑
            </a-checkbox>
          </a>
          <div class="margin-left-sm" style="height: 20px;overflow: hidden;">
            <a-tooltip effect="dark" :title="item.filedName" placement="bottom">
              <ellipsis :length="22">{{ item.filedName }}</ellipsis>
            </a-tooltip>
          </div>
        </a-list-item>
      </a-list>
    </a-card>
    <form-modal
      :visible="formModalVisible"
      :loading="formModalLoading"
      @ok="formModalOk"
      @cancel="formModalCancel"
      @handleFormData="handleFormData"
      @formChange="formChange"
    ></form-modal>
    <!-- 数据接收 -->
    <transferDataModal
      :visible="transferDataModalVisible"
      :loading="transferDataModalLoading"
      :nowFieldList="formFieldList"
      :lastNodeList="lastNodeList"
      @ok="transferDataModalOk"
      @cancel="transferDataModalOk"
    />
  </div>
</template>

<script>
import { Ellipsis } from "@/components";
import formModal from "./formModal.vue";
import transferDataModal from "./modal/transferDataModal.vue";
export default {
  data() {
    return {
      formFieldList: [],
      allLook: false,
      allEdit: false,
      allDisabled: false,
      formModalVisible: false,
      formModalLoading: false,
      formName: "",
      formType: "",
      formLayout: "",
      transferDataModalVisible: false, // 数据传递
      transferDataModalLoading: false,
      lastNodeList: [], // 上一节点的列表,到modal页再拆分出字段列表
      lastFieldList: [], // 已经选中的规则
    };
  },
  components: {
    transferDataModal,
    Ellipsis,
    formModal,
  },
  props: {
    nodeElement: {
      type: Object,
      required: true,
    },
    modeler: {
      type: Object,
      required: true,
    },
    formFieldLists: {
      type: Array,
    },
    updateList: {
      type: Array,
    },
  },
  mounted() {},
  watch: {
    //   监听节点变化，获取表单配置
    nodeElement: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        this.formName = "";
        this.formType = "";
        this.formLayout = "";
        if (newVal.type == "bpmn:UserTask") {
          // 遍历获取上一节点是任务节点的节点
          this.lastNodeList = [];
          if (newVal.businessObject.incoming) {
            newVal.businessObject.incoming?.forEach((item) => {
              // 排查当前节点前面的任务节点
              if (
                item.sourceRef.$type === "bpmn:UserTask" &&
                item.sourceRef.$attrs.formType == 2
              ) {
                this.lastNodeList.push({
                  frontNodeName: item.sourceRef.name, // 前置字段名称
                  frontNodeId: item.sourceRef.id, // 前置节点id
                  frontFormName: item.sourceRef.$attrs.formName, // 前置节点表单名称
                  postNodeName: newVal.businessObject.name, // 后置字段名称
                  postNodeId: newVal.businessObject.id, // 后置节点id
                  formFieldList: JSON.parse(item.sourceRef.formFieldList),
                  ruleList: [],
                });
              }
            });
            // 如果已经编辑过规则则赋值给数组
            if (newVal.businessObject.$attrs.actMyNodeFormFieldList) {
              const actMyNodeFormFieldList = JSON.parse(
                newVal.businessObject.$attrs.actMyNodeFormFieldList
              );
              for (let i = 0; i < actMyNodeFormFieldList.length; i++) {
                for (let j = 0; j < this.lastNodeList.length; j++) {
                  if (
                    actMyNodeFormFieldList[i].frontNodeId ===
                      this.lastNodeList[j].frontNodeId &&
                    actMyNodeFormFieldList[i].frontFormName ===
                      this.lastNodeList[j].frontFormName
                  ) {
                    this.lastNodeList[j].ruleList =
                      actMyNodeFormFieldList[i].ruleList;
                  }
                }
              }
            }
          }
          const bpmnModeler = this.modeler;
          const modeling = bpmnModeler.get("modeling");
          const businessObject = newVal.businessObject;
          let updateList = [];
          if (businessObject?.$attrs?.formName) {
            this.formLayout = JSON.parse(
              businessObject.formFieldList
            )[0].formLayout;
            this.formName = businessObject.$attrs.formName;
            this.formType = businessObject.$attrs.formType;
          }
          // 更新 表单数据
          if (this.updateList?.length != 0 && businessObject.formFieldList) {
            this.updateList.forEach((m) => {
              JSON.parse(
                businessObject.formFieldList.replace(/'/g, '"')
              ).forEach((e) => {
                if (m.filed === e.filed) {
                  m.isEdit = e.isEdit;
                  m.isLook = e.isLook;
                }
              });
            });
            this.formFieldList = this.updateList;
            this.updateProperties({
              formFieldList: JSON.stringify(updateList),
            });
            this.getStatus(this.updateList);
          } else {
            if (businessObject.formFieldList) {
              this.formFieldLists.forEach((m) => {
                JSON.parse(
                  businessObject.formFieldList.replace(/'/g, '"')
                ).forEach((e) => {
                  if (m.filed === e.filed) {
                    m.isEdit = e.isEdit;
                    m.isLook = e.isLook;
                  }
                });
              });

              // this.formFieldList = this.formFieldLists;
              this.formFieldList = businessObject.formFieldList
                ? JSON.parse(businessObject.formFieldList)
                : [];
            } else {
              // this.formFieldList = this.formFieldLists;
              this.formFieldList = businessObject.formFieldList
                ? JSON.parse(businessObject.formFieldList)
                : [];
            }
            this.getStatus(this.formFieldList);
          }
        }
      },
    },
    // 表单数据发生变化是，更新表单属性
    updateList(val) {
      if (val.length != 0) {
        let obj = this.nodeElement.businessObject;
        let updateList = [];
        if (obj.formFieldList) {
          this.updateList.forEach((m) => {
            JSON.parse(obj.formFieldList.replace(/'/g, '"')).forEach((e) => {
              if (m.filed === e.filed) {
                m.isEdit = e.isEdit;
                m.isLook = e.isLook;
              }
            });
          });
          this.formFieldList = this.updateList;
          this.updateProperties({
            formFieldList: JSON.stringify(this.updateList),
          });
        } else {
          this.formFieldList = val;
        }
        this.getStatus(this.formFieldList);
      }
    },
    // 表单字段
    formFieldLists(val) {
      if (val.length != 0) {
        let obj = this.nodeElement.businessObject;
        if (obj.formFieldList) {
          val.forEach((m) => {
            JSON.parse(obj.formFieldList.replace(/'/g, '"')).forEach((e) => {
              if (m.filed === e.filed) {
                m.isEdit = e.isEdit;
                m.isLook = e.isLook;
              }
            });
          });
          this.formFieldList = val;
        } else {
          this.formFieldList = val;
        }
        this.updateProperties({
          formFieldList: JSON.stringify(this.formFieldList),
        });
        this.getStatus(this.formFieldList);
      } else {
        this.formFieldList = [];
        delete this.nodeElement.businessObject.formFieldList;
      }
    },
  },
  methods: {
    // 数据传递
    transferData() {
      this.transferDataModalVisible = true;
    },
    transferDataModalOk(data) {
      this.updateProperties({
        actMyNodeFormFieldList: JSON.stringify(data),
      });
      this.lastNodeList = data;
      this.transferDataModalVisible = false;
    },
    // 表单更新后重置数据接收规则
    resetRules() {
      this.lastNodeList = [];
      this.updateProperties({
        actMyNodeFormFieldList: JSON.stringify(this.lastNodeList),
      });
      if (this.nodeElement.businessObject.incoming) {
        this.nodeElement.businessObject.incoming?.forEach((item) => {
          if (
            item.sourceRef.$type === "bpmn:UserTask" &&
            item.sourceRef.$attrs.formType == 2
          ) {
            this.lastNodeList.push({
              frontNodeName: item.sourceRef.name,
              frontNodeId: item.sourceRef.id,
              postNodeName: this.nodeElement.businessObject.name,
              postNodeId: this.nodeElement.businessObject.id,
              formFieldList: JSON.parse(item.sourceRef.formFieldList),
              ruleList: [],
            });
          }
        });
      }
    },
    // 获取编辑、查看
    getStatus(list) {
      const flagLook = list.some((item) => {
        return item.isLook === false;
      });
      const flagEdit = list.some((item) => {
        return item.isEdit === false;
      });
      if (flagLook) {
        this.allLook = false;
        this.allDisabled = false;
      } else {
        this.allLook = true;
        this.allDisabled = true;
      }
      if (flagEdit) {
        this.allEdit = false;
      } else {
        this.allEdit = true;
      }
    },
    // 全选
    onChangeEditAll(data, type) {
      this.formFieldList.forEach((e) => {
        if (data && type === 0)
          (e.isLook = true), this.getStatus(this.formFieldList);
        if (data && type === 1) e.isEdit = true;
        if (!data && type === 0)
          (e.isLook = false),
            (e.isEdit = false),
            this.getStatus(this.formFieldList);
        if (!data && type === 1) e.isEdit = false;
      });
      this.updateProperties({
        formFieldList: JSON.stringify(this.formFieldList),
      });
    },
    // 编辑查看设置
    onChangeEdit(data, type) {
      if (type === 0 && !data.isLook) {
        data.isEdit = false;
      }
      if (type === 1 && data.isEdit) {
        data.isLook = true;
      }
      let formFieldList = this.formFieldList;
      this.updateProperties({
        formFieldList: JSON.stringify(formFieldList),
      });
      this.getStatus(formFieldList);
    },
    // 更新流程属性
    updateProperties(properties) {
      this.modeler
        .get("modeling")
        .updateProperties(this.nodeElement, properties);
    },
    addForm() {
      this.formModalVisible = true;
    },
    formModalOk() {
      this.formModalVisible = false;
    },
    formModalCancel() {
      this.formModalVisible = false;
    },
    handleFormData(data) {
      // let list = JSON.parse(data).list;
      // list.forEach(item => {
      //   this.formFieldLists.push({
      //     filed: item.model,
      //     filedName: item.label,
      //     isEdit: false,
      //     isLook: false
      //   });
      // });
      // this.updateProperties({
      //   formFieldList: data
      // });
    },
    formChange(name, type, uuid, layout) {
      this.resetRules();
      this.formName = name;
      this.formType = type;
      this.formLayout = layout;
      this.updateProperties({
        formName: name,
        formType: type,
      });
      this.$nextTick(() => {
        this.formFieldList.forEach((item) => {
          item.isEdit = true;
          item.isLook = true;
        });
        this.allEdit = true;
        this.allLook = true;
        this.allDisabled = true;
        this.updateProperties({
          formFieldList: JSON.stringify(this.formFieldList),
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.form-container {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .form-row {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 10px 0 5px 0;

    .form-item {
      line-height: 32px;
    }

    .form-button {
      width: 70%;
    }
  }

  .form-row:last-child {
    margin: 5px 0 10px 0;
  }
}
// .l-card {
//   margin-top: 20px !important;
// }
/deep/ .l-card .ant-card-head {
  padding: 0 8px 0 18px !important;
}

/deep/ .ant-card-body {
  height: calc(100vh - 350px);
  overflow: auto;
  padding: 0 !important;
}

.ant-list-item {
  padding: 8px 0 !important;
}

.list-item {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-direction: row-reverse;
  padding-right: 6px;
}

.right-checkbox {
  width: 171px;
  display: flex;
  justify-content: space-between;
}

.form-header {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border-top: 1px solid #e8e8e8;
  .form-name {
    flex-basis: 50%;
    flex-grow: 1;
  }
  .form-name:not(:last-child) {
    margin-bottom: 5px;
  }
  span {
    font-weight: bold;
  }
}
</style>
